<template>
  <view class="container">
    <!-- 页面标题 -->
    <view class="header">
      <text class="title">个人设置</text>
    </view>
    
    <!-- 个人信息 -->
    <view class="section-card">
      <view class="user-profile">
        <image class="user-avatar" :src="userInfo.avatar"></image>
        <view class="profile-info">
          <text class="user-name">{{userInfo.name}}</text>
          <text class="user-role">{{userInfo.role}}</text>
        </view>
        <view class="edit-btn" @click="editProfile">
          <uni-icons type="compose" size="18" color="#1890ff"></uni-icons>
        </view>
      </view>
    </view>
    
    <!-- 子女管理 -->
    <view class="section-card">
      <view class="card-header">
        <text class="section-title">子女管理</text>
        <view class="add-btn" @click="addChild">
          <uni-icons type="plusempty" size="14" color="#1890ff"></uni-icons>
          <text>添加</text>
        </view>
      </view>
      <view class="children-list">
        <view class="child-item" v-for="(child, index) in children" :key="index" @click="switchChild(child)">
          <view class="child-info">
            <image class="child-avatar" :src="child.avatar"></image>
            <view class="child-detail">
              <text class="child-name">{{child.name}}</text>
              <text class="child-grade">{{child.grade}}</text>
            </view>
          </view>
          <view class="child-status" :class="{active: child.isActive}">
            {{child.isActive ? '当前查看' : '点击切换'}}
          </view>
        </view>
      </view>
    </view>
    
    <!-- 系统设置 -->
    <view class="section-card">
      <view class="card-header">
        <text class="section-title">系统设置</text>
      </view>
      <view class="settings-list">
        <view class="setting-item" @click="navigateTo('/pages/profile/notifications')">
          <view class="setting-label">
            <uni-icons type="notification" size="18" color="#666"></uni-icons>
            <text>消息通知</text>
          </view>
          <view class="setting-action">
            <uni-icons type="right" size="14" color="#999"></uni-icons>
          </view>
        </view>
        <view class="setting-item" @click="navigateTo('/pages/profile/privacy')">
          <view class="setting-label">
            <uni-icons type="locked" size="18" color="#666"></uni-icons>
            <text>隐私设置</text>
          </view>
          <view class="setting-action">
            <uni-icons type="right" size="14" color="#999"></uni-icons>
          </view>
        </view>
        <view class="setting-item">
          <view class="setting-label">
            <uni-icons type="eye" size="18" color="#666"></uni-icons>
            <text>深色模式</text>
          </view>
          <view class="setting-action">
            <switch :checked="darkMode" @change="toggleDarkMode" color="#1890ff" style="transform:scale(0.8)" />
          </view>
        </view>
      </view>
    </view>
    
    <!-- 关于与支持 -->
    <view class="section-card">
      <view class="card-header">
        <text class="section-title">关于与支持</text>
      </view>
      <view class="settings-list">
        <view class="setting-item" @click="navigateTo('/pages/profile/about')">
          <view class="setting-label">
            <uni-icons type="info" size="18" color="#666"></uni-icons>
            <text>关于我们</text>
          </view>
          <view class="setting-action">
            <uni-icons type="right" size="14" color="#999"></uni-icons>
          </view>
        </view>
        <view class="setting-item" @click="navigateTo('/pages/profile/feedback')">
          <view class="setting-label">
            <uni-icons type="chat" size="18" color="#666"></uni-icons>
            <text>意见反馈</text>
          </view>
          <view class="setting-action">
            <uni-icons type="right" size="14" color="#999"></uni-icons>
          </view>
        </view>
        <view class="setting-item" @click="navigateTo('/pages/profile/faq')">
          <view class="setting-label">
            <uni-icons type="help" size="18" color="#666"></uni-icons>
            <text>常见问题</text>
          </view>
          <view class="setting-action">
            <uni-icons type="right" size="14" color="#999"></uni-icons>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 退出登录 -->
    <view class="logout-btn" @click="logout">
      退出登录
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {
        name: "王妈妈",
        role: "家长",
        avatar: "/static/avatar-parent.png"
      },
      children: [
        {
          id: 1,
          name: "王小明",
          grade: "初中二年级",
          avatar: "/static/avatar-child1.png",
          isActive: true
        },
        {
          id: 2,
          name: "王小红",
          grade: "小学六年级",
          avatar: "/static/avatar-child2.png",
          isActive: false
        }
      ],
      darkMode: false
    };
  },
  methods: {
    editProfile() {
      uni.showToast({
        title: '编辑个人资料',
        icon: 'none'
      });
    },
    addChild() {
      uni.showToast({
        title: '添加子女',
        icon: 'none'
      });
    },
    switchChild(child) {
      // 避免重复切换当前显示的孩子
      if (child.isActive) return;
      
      // 切换选中状态
      this.children.forEach(c => {
        c.isActive = c.id === child.id;
      });
      
      uni.showToast({
        title: `已切换到 ${child.name}`,
        icon: 'success'
      });
      
      // 切换后应刷新首页数据
      // 可以通过事件总线或全局状态管理实现
    },
    navigateTo(url) {
      uni.navigateTo({ url });
    },
    toggleDarkMode(e) {
      this.darkMode = e.detail.value;
      // 实际应用中这里需要改变全局主题
    },
    logout() {
      uni.showModal({
        title: '提示',
        content: '确定要退出登录吗？',
        success: (res) => {
          if (res.confirm) {
            uni.showToast({
              title: '已退出登录',
              icon: 'success',
              success: () => {
                setTimeout(() => {
                  // 清除登录状态
                  // 跳转到登录页
                  uni.reLaunch({
                    url: '/pages/login/index'
                  });
                }, 1500);
              }
            });
          }
        }
      });
    }
  }
};
</script>

<style>
.container {
  padding: 30rpx;
  padding-bottom: 100rpx;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.header {
  margin-bottom: 30rpx;
}

.title {
  font-size: 40rpx;
  font-weight: bold;
  color: #333;
}

.section-card {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.user-profile {
  display: flex;
  align-items: center;
}

.user-avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 60rpx;
  margin-right: 24rpx;
}

.profile-info {
  flex: 1;
}

.user-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 8rpx;
}

.user-role {
  font-size: 26rpx;
  color: #666;
}

.edit-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.section-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
}

.add-btn {
  display: flex;
  align-items: center;
  font-size: 26rpx;
  color: #1890ff;
}

.add-btn text {
  margin-left: 6rpx;
}

.children-list {
  display: flex;
  flex-direction: column;
}

.child-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

.child-item:last-child {
  border-bottom: none;
}

.child-info {
  display: flex;
  align-items: center;
}

.child-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 40rpx;
  margin-right: 16rpx;
}

.child-detail {
  display: flex;
  flex-direction: column;
}

.child-name {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 6rpx;
}

.child-grade {
  font-size: 24rpx;
  color: #666;
}

.child-status {
  font-size: 24rpx;
  color: #999;
  padding: 6rpx 16rpx;
  border-radius: 20rpx;
}

.child-status.active {
  background-color: #e6f7ff;
  color: #1890ff;
}

.settings-list {
  display: flex;
  flex-direction: column;
}

.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

.setting-item:last-child {
  border-bottom: none;
}

.setting-label {
  display: flex;
  align-items: center;
}

.setting-label text {
  margin-left: 16rpx;
  font-size: 28rpx;
  color: #333;
}

.logout-btn {
  background-color: #fff;
  border-radius: 16rpx;
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30rpx;
  color: #f04864;
  margin-top: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}
</style> 